<script setup lang="ts">
import type {Ref} from "vue-demi";
import {uploadFile, uploadLargeFile} from "@/utils/file";
import {useUserStore} from "@/stores";
import type {OssFileVo} from "@/apis/oss";
import {useFileStore} from "@/stores/modules/file";
import eventBus from "@/stores/event";

const FILE_MAX_SIZE = 1024 * 1024 * 5

const defProps = defineProps({
  width: {
    type: String,
    default: "500"
  },
  height: {
    type: String,
    default: "300"
  },
  mediaSrc: {
    type: Array<Media>,
    default: () => []
  },
  isImg: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["delMedia", "selectMedia"])

export interface Media {
  id: string,
  file?: Blob,
  src: string,
  isVideo: Boolean,
  isPre: Boolean,
  /**
   * 是否已上传
   */
  isUpload: Boolean
}

const mediaList:Ref<Media[]> = ref([])

const allFile = ref(false)

const fileStore = useFileStore()


const clickAllMediaHandler = () => {
  allFile.value = !allFile.value
}


/**
 * 选择视频媒体
 */
const selectMedia = async () => {
  const input = document.createElement("input")
  input.type = "file"

  if (!defProps.isImg)
  {
    input.accept = "image/gif,image/jpeg,image/jpg,image/png,video/mp4,video/avi,video/mkv"
  }
  else
  {
    input.accept = "image/gif,image/jpeg,image/jpg,image/png"
  }

  input.onchange = async (e) =>
  {
    let files =  e.target!.files


    for (let i = 0; i < files.length; i++)
    {
      let file = files[i]
      let fileType = file.type + ""

      if (file.size > FILE_MAX_SIZE)
      {

        //大文件上传逻辑
        await uploadLargeFile(file, useUserStore().userInfo.id, "media")
        fileStore.isHaveFileUpload = true

      }
      else
      {
        //小文件上传逻辑
        await uploadFile(file, useUserStore().userInfo.id, "media").then(res => {
            const curFile = res.data.data as OssFileVo;
            mediaList.value = defProps.mediaSrc


            mediaList.value.push({
              id: curFile.ossId,
              src: import.meta.env.VITE_API_BASE_URL + curFile.clientUrl,
              isVideo: fileType.includes("video"),
              isPre: true,
              isUpload: true
            })

            emit("selectMedia", mediaList)
        })

      }



    }


  }

  input.click()

}

/**
 * 视频上传完成回调
 * @param media
 */
eventBus.on("uploadSuccess", (data: any) => {
    mediaList.value = defProps.mediaSrc
    data = data as OssFileVo
    mediaList.value.push({
      id: data.ossId,
      src: import.meta.env.VITE_API_BASE_URL + data.clientUrl,
      isVideo: true,
      isPre: true,
      isUpload: true
    })
    emit("selectMedia", mediaList)
})

const delMedia = (media: Media) => {
  mediaList.value = defProps.mediaSrc
  emit("delMedia", media)
}

</script>

<template>
  <div class="media_back">

    <a-carousel :style="`width:${width}px;height:${height}px`" >
      <a-carousel-item v-for="i in mediaSrc">
        <video :src="i.src" v-if="i.isVideo && i.isPre" controls :style="`width:${width}px;height:${height}px`"></video>
        <div class="video_big" v-if="i.isVideo && !i.isPre" :style="`width:${width}px;height:${height}px`">
          <span>文件过大，暂不支持不上传提前预览</span>
        </div>
        <a-image :src="i.src" v-if="!i.isVideo" :width="width" :height="height"></a-image>
      </a-carousel-item>

      <a-carousel-item v-if="mediaSrc.length === 0 && !fileStore.isHaveFileUpload" >

        <div class="video_big" >
          <span>没有媒体文件，选择上传一个吧</span>
        </div>

      </a-carousel-item>

      <a-carousel-item v-if="fileStore.isHaveFileUpload">

        <div class="prog">
          <a-progress type="circle" :percent="fileStore.curFileStatus" />
        </div>


      </a-carousel-item>

    </a-carousel>



    <a-button type="text" @click="selectMedia" v-if="!fileStore.isHaveFileUpload">选择</a-button>
    <a-button type="text" @click="clickAllMediaHandler">全部媒体</a-button>

    <!--弹窗-->
    <a-modal v-model:visible="allFile" title="全部媒体" :width="1080">

      <div class="group" v-if="mediaSrc.length != 0">

        <div class="media-item" v-for="i in mediaSrc">

          <a-image :src="i.src" v-if="!i.isVideo" :width="width" :height="height" />
          <video :src="i.src" v-if="i.isVideo && i.isPre" controls :style="`width:${width}px;height:${height}px`" />

          <div class="video_big" v-if="i.isVideo && !i.isPre" :style="`width:${width}px;height:${height}px`">
            <span>视频文件过大，暂不支持不上传提前预览</span>
          </div>

          <a-button type="text" status="danger" @click="delMedia(i)">删除</a-button>

        </div>

      </div>

      <div class="media_null" v-if="mediaSrc.length == 0">
        <span>暂时无媒体文件</span>
        <p>请选择文件</p>
      </div>

    </a-modal>

  </div>
</template>

<style scoped lang="scss">

.prog {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video_big {
  span {
    color: #4e5969;
    font-size: 10px;
  }
}

.group {
  .media-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
  flex-wrap: wrap;
}

.media_null {
  span {
    color: #4e5969;
  }
  p {
    color: #4e5969;
    font-size: 10px;
  }
  text-align: center;
}

.box {
  .media {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}
</style>